<template>
	<view class="">
		<!--  -->
		<ben></ben>
		<!--  -->
		<view class="head_back" style="padding: 30rpx;">
			<view class="row">
				<image :src="shop.stores_logo" mode="" class="rad1" style="width: 120rpx;height: 120rpx;"></image>
				<view class="column flex1 minleft20">
					<view class="colf font600 size28 row">
						{{ shop.stores_name }}
					</view>
					<view class="minto minbottom0 size26 colf font500 omit2">
						地址：{{ shop.stores_address }}
					</view>
				</view>
			</view>
			<view class="mintop30 flex1">
				<u-search placeholder="请输入商品搜索" v-model="search" actionText="搜索" :actionStyle="{'color': '#fff'}"
					@custom="$jump.nav('/indexpackage/user/search?search=' + search + '&shop_id=' + id)"
					@search="$jump.nav('/indexpackage/user/search?search=' + search + '&shop_id=' + id)"
					:showAction="true" :animation="true" height="30"></u-search>
			</view>
		</view>
		<view class="row pad30 align_item_c background_f">
			<view class="size26 col3 font500 row" @click="show = true">
				<u-icon name="list" color="#FE9110" size="18" bold="true"></u-icon>
				{{classify ? classify : '商品分类'}}
			</view>
			<view class="minau" style="padding: 6rpx 30rpx;"
				:class="siftIndex == siftindex ? 'font600 col0 size30' : 'font500 col9 size26'" v-for="(siftInfo,siftindex) in sift"
				:key="siftindex" @click="tabSift(siftindex)">
				{{ siftInfo }}
			</view>
		</view>
		<view class="min30_rl minbottom20">
			<view class="row flexwrap">
				<view class="rad2 list column mintop30"
					style="box-shadow: 1rpx 1rpx 8rpx 2rpx rgba(206,188,172,0.24);width: 48%;"
					v-for="(item,index) in list" @click="$jump.nav('/indexpackage/user/goods_info?id=' + item.id)">
					<image :src="item.image" mode=""
						style="width: 330rpx;height: 330rpx;border-radius: 20rpx 20rpx 0 0;"></image>
					<view class="column min20 flex1">
						<view class="size26 col3 font500 omit2">
							{{ item.title }}
						</view>
						<view class="row " style="margin-top: auto;">
							<view class="size22 font500 row align_item_c" style="color: #C0C0C0;">月销量
								<view class="">
									{{ item.sales }}
								</view>
							</view>
							<view class="minau minright0 row">
								<view class="size36 font600" style="color: #FE3C3C;">
									<text>￥</text>
									<text>{{item.specs[0].selling_price}}</text>
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品分类 -->
		<u-picker :show="show" :columns="columns" keyName="title" @confirm="confirm"
			@cancel="show = false,classify = '',classify_id = ''"></u-picker>
		<!-- 商品分类 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				id: '',
				user_id: '',
				classify: '',
				classify_id: '',
				search: '',
				page: 1,
				shop: [],
				list: [],
				// shop_img: 'https://cdn.uviewui.com/uview/album/1.jpg',
				// shop_name: '店名店名店名',
				// address: '云南省昆明市呈贡区XX街道XX号',
				siftIndex: 0,
				// goodsArr: [{
				// 		image: 'https://cdn.uviewui.com/uview/album/1.jpg',
				// 		title: '天然蓝莓 新鲜高山大蓝莓14~16mm',
				// 		price: '10.99'
				// 	},
				// 	{
				// 		image: 'https://cdn.uviewui.com/uview/album/1.jpg',
				// 		title: '天然蓝莓 新鲜高山大蓝莓14~16mm',
				// 		price: '10.99'
				// 	}
				// ],
				sift: ['综合', '价格', '销量'],
				columns: [],
			}
		},
		onLoad(op) {
			this.id = op.stores_id
			this.page = 1
			this.getStore()
		},
		onShow() {
			//当前页面展示的时候他就执行该生命周期
			const token = uni.getStorageSync('token');
			if (token) {
				// uni.pageScrollTo({
				// 	scrollTop: 0,
				// 	duration: 10 // 滚动动画时长，默认300ms
				// });

				this.getClassify()
			} else {
				uni.showToast({
					title: '您还未登录，正在前往登录',
					icon: 'none'
				})
				setTimeout(function() {
					uni.navigateTo({
						url: "/mypackage/user/login"
					})
				}, 1000)
			}
		},
		onReachBottom() {
			if (this.page < 0) return;
			this.status = 'loading';
			this.page = ++this.page
			this.getStore()
			setTimeout(() => {
				console.log(this.loadmore);
				if (this.loadmore.length == 0) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		},
		methods: {
			async getClassify() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("home/home_classify")
				if (code == 200) {
					this.columns[0] = data
				} else {
					console.log(message);
				}
			},
			async getStore() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("home/shop_info/" + this.id, {
					order: this.siftIndex == 0 ? this.classify_id ? 1 : '' : this.siftIndex + 1,
					classify_id: this.classify_id,
					page: this.page
				})
				if (code == 200) {
					this.shop = data.shop_info
					if (this.page != 1) {
						this.loadmore = data.goods_info.items
						for (var i = 0; i < data.goods_info.items.length; i++) {
							this.list.push(data.goods_info.items[i]); // 加载的数据追加在上一页后面
						}
					} else {
						this.loadmore = data.goods_info.items
						this.list = data.goods_info.items
					}
				} else if (code == 500) {
					this.list = data
					this.loadmore = data
				} else {
					console.log(message);
				}
			},
			tabSift(i) {
				this.siftIndex = i
				this.classify = ''
				this.classify_id = ''
				console.log(this.siftIndex);
				this.page = 1
				this.getStore()
			},
			confirm(e) {
				console.log(e);
				this.siftIndex = 0
				this.classify = e.value[0].title
				this.classify_id = e.value[0].id

				this.show = false
				this.page = 1
				this.getStore()
			}
		}
	}
</script>

<style scoped lang="less">
	.head_back {
		background: linear-gradient(63deg, #FF515E 0%, #FF7F3E 100%), linear-gradient(167deg, #FF6B4A 0%, rgba(255, 123, 77, 0) 100%);
	}

	.list {
		&:nth-child(2n) {
			margin-left: 26rpx;
		}
	}
</style>